@use "../../default" as theme;
@use "../../Spin/style/default" as Spin;
@use "sass:math";
@use "sass:color";
.pf-Button{
	flex-shrink:0;
	position:relative;
	display:inline-flex;
	justify-content:center;
	align-items:center;
	padding:0 16px;
	height: theme.$Button-height;
	border-radius: theme.$Button-radius;
	font-size: theme.$Button-content-size;
	transition: theme.$Button-transition;
	transition-property:background-color,border-color,color;
	cursor:pointer;
	user-select:none;
	vertical-align: theme.$vertical-align;
	&:focus{
		outline:0;
	}
	&.pf--disabled{
		@include theme.disabled-mask;
		&:after{
			border-radius: theme.$Button-radius;
		}
		&.pf--mode-outline,&.pf--type-default{
			&:after{
				width:calc(100% + 2px);
				height:calc(100% + 2px);
				left:-1px;
				top:-1px;
			}
		}
		&.pf--shape-round:after{
			border-radius: math.div(theme.$Button-height,2);
		}
		&.pf--shape-circle:after{
			border-radius:50%;
		}
	}
	&.pf--shape-round{
		border-radius: math.div(theme.$Button-height,2);
	}
	&.pf--shape-circle{
		border-radius:50%;
		width: theme.$Button-height;
		padding:0;
	}
	@mixin hover-active($-hover-color,$-active-color){
		&.pf--enable{
			&:hover,&:focus{
				background:$-hover-color;
			}
			&:active{
				background:$-active-color;
			}
		}
	}
	&.pf--type-text{
		color: theme.$Button-color;
	}
	&.pf--type-default{
		&.pf--mode-fill{
			border:1px solid theme.$Button-border-color;
			color: theme.$Button-color;
			background:#fff;
			@include hover-active(
				#fafafa,
				#f0f0f0,
			);
		}
		&.pf--mode-outline{
			border:1px solid #fff;
			color:#fff;
			&.pf--enable{
				&:hover,&:focus{
					color: theme.$Button-primary-color;
					border-color: theme.$Button-primary-color;
				}
				&:active{
					color: theme.$Button-primary-color-dark;
					border-color: theme.$Button-primary-color-dark;
				}
			}
		}
	}
	@mixin button($-type,$-color,$-hover-color,$-active-color){
		&.pf--type-#{$-type}{
			color:#fff;
			&.pf--mode-fill{
				background:$-color;
				@include hover-active(
					$-hover-color,
					$-active-color,
				);
			}
			&.pf--mode-outline{
				border:1px solid $-color;
				color:$-color;
				@include hover-active(
					#fafafa,
					#f0f0f0,
				);
			}
		}
	}
	@include button(primary,theme.$Button-primary-color,theme.$Button-primary-color-light,theme.$Button-primary-color-dark);
	@include button(info,theme.$Button-info-color,theme.$Button-info-color-light,theme.$Button-info-color-dark);
	@include button(success,theme.$Button-success-color,theme.$Button-success-color-light,theme.$Button-success-color-dark);
	@include button(warning,theme.$Button-warning-color,theme.$Button-warning-color-light,theme.$Button-warning-color-dark);
	@include button(error,theme.$Button-error-color,theme.$Button-error-color-light,theme.$Button-error-color-dark);
	>.pf-Icon{
		flex-shrink:0;
		font-size:18px;
		cursor:pointer;
	}
}
.pf-Spin.pf-Button_spin{
	flex-shrink:0;
	font-size:18px;
	color:#fff;
	margin-left: theme.$Button-gap;
	.pf--type-default>&,.pf--type-text>&{
		color: theme.$Button-color;
	}
}